<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <link href="../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

    <link href="../assets/global/plugins/bootstrap-select/css/bootstrap-select.css" rel="stylesheet" type="text/css" />

    <link href="../assets/global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css" />
    <link href="../assets/global/css/plugins.min.css" rel="stylesheet"  type="text/css" />

    <link href="../assets/global/plugins/jstree/dist/themes/default/style.min.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="../assets/global/plugins/layui/css/layui.css"/>
    <link rel="stylesheet" href="../assets/custom/css/changeother.css"/>
</head>
<body>
<div class="process-page process1">
    <div class="portlet-body">
        <div class="form-body">
            <div class="row">
                <div class="col-xs-6">
                    <div class="form-group">
                        <span class="col-xs-4 col-md-2 form-label">服务名:</span>
                        <div class="col-xs-8 col-md-10">
                            <input type="text">
                        </div>
                    </div>
                </div>
                <div class="col-xs-6">
                    <div class="form-group">
                        <span class="col-xs-4 col-md-2 form-label">服务中文名:</span>
                        <div class="col-xs-8 col-md-10">
                            <input type="text">
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-group" >
                <span class="col-xs-2 col-md-1 form-label">所属数据源:</span>
                <div class="col-xs-4 col-md-5">
                    <select class="bs-select form-control">
                        <option>全量</option>
                        <option>时间戳增量</option>
                        <option>比对同步</option>
                    </select>
                </div>
            </div>

            <div class="form-group" >
                <span class="col-xs-2 col-md-1 form-label">描述:</span>
                <div class="col-xs-10 col-md-11">
                    <textarea  style="width: 100%; padding: 10px 15px; resize: vertical;max-height:200px;min-height: 50px;"></textarea>
                </div>
            </div>
            <div class="form-group" >
                <span class="col-xs-2 col-md-1 form-label">SQL:</span>
                <div class="col-xs-9 col-md-10">
                    <textarea id="insertSql" style="width: 100%; padding: 10px 15px; resize: vertical;min-height: 200px;"></textarea>
                </div>
                <span class="col-xs-1">
                    <div class="data_help_box">
                       <a class="fa fa-h-square data_help_btn tableHref" data-toggle="tooltip" data-placement="left" title="帮助"></a>
                      <p class="data_comments display_none">支持Mybatis SQL表达式</p>
                    </div>
                </span>
            </div>
            <div class="form-group" >
                <div class="col-xs-2 col-md-1"> </div>
                <div class="col-xs-2 col-md-1"> <button class="btn default insertVar">插入</button></div>
                <div class="col-xs-4 col-md-2">
                    <div class="systemVar display_none" style="    border: 1px solid #bbb;padding: 10px;">
                        <input type="text" id="plugins4_q" class="form-control"/>
                        <div id="tree_3" class="tree-demo jstree jstree-3 jstree-default" role="tree" >

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class='process_foot_box'>
        <div class="process_foot">
            <button class="btn blue-hoki process1_next processNext" data-page = "1">下一步</button>
            <button class="btn default  close_layui_page">取消</button>
        </div>
    </div>
</div>
<div class="process-page process2 display_none">
    <div class="portlet-body">
        <div class="form-body form-table">
            <div class="margin-bottom-10">
                <div class="from_control clearfix">
                    <div class="from_control_l">
                        <span class="label_on">调用端可传入的查询条件参数：</span>
                    </div>
                    <div class="from_control_r">
                        <button class="btn default">调整顺序</button>
                    </div>
                </div>
                <table class="layui-table" id="LAY_table_user" lay-filter="user"></table>
            </div>

            <div>
                <div class="from_control clearfix">
                    <div class="from_control_l">
                        <span class="label_on">系统自动获取的查询条件参数：</span>
                    </div>
                </div>
                <table class="layui-table"  id="LAY_table_user2" lay-filter="user"></table>
            </div>

        </div>
    </div>
    <div class='process_foot_box'>
        <div class="process_foot">
            <button class="btn blue-hoki  process2_next processNext" data-page = "2">下一步</button>
            <button class="btn default  close_layui_page">取消</button>
        </div>
    </div>
</div>
<div class="process-page process3 display_none">
    <div class="portlet-body">
        <div class="form-body form-table">
            <table class="layui-table"  id="LAY_table_user3" lay-filter="user"></table>
        </div>
    </div>
    <div class='process_foot_box'>
        <div class="process_foot">
            <button class="btn blue-hoki  process3_next processNext" data-page = "3">下一步</button>
            <button class="btn default  close_layui_page">取消</button>
        </div>
    </div>
</div>
<div class="process-page process4 display_none">
    <div class="portlet-body">
        <div class="form-body form-table">
            <div class="margin-bottom-10">
                <div class="from_control clearfix">
                    <div class="from_control_l">
                        <span class="label_on">表构成关系解析：</span>
                    </div>
                    <div class="from_control_r">
                        <a href="javascript:;" class="process4Add label_on"><i class="glyphicon glyphicon-plus-sign" style="color: #20c1dc; margin-right: 3px;"></i>添加</a>
                    </div>
                </div>
                <table class="layui-table" id="LAY_table_user4" lay-filter="user"></table>
            </div>

            <div>
                <div class="from_control clearfix">
                    <div class="from_control_l">
                        <span class="label_on">字段构成关系解析：</span>
                    </div>
                </div>
                <table class="layui-table"  id="LAY_table_user5" lay-filter="user"></table>
            </div>
        </div>
    </div>
    <div class='process_foot_box'>
    <div class="process_foot">
        <button class="btn blue-hoki close_layui_page">完成</button>
    </div>
    </div>
</div>

</body>
<script src="../assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/bootstrap-select/js/bootstrap-select.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/jquery-multi-select/js/jquery.multi-select.js" type="text/javascript"></script>
<script src="../assets/global/plugins/select2/js/select2.full.min.js" type="text/javascript"></script>


<script src="../assets/global/scripts/app.min.js" type="text/javascript"></script>

<script src="../assets/global/plugins/jstree/dist/jstree.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/jstree/src/jstree.search.js"></script>
<!--<script src="../assets/global/plugins/jstree/dist/ui-tree.min.js" type="text/javascript"></script>-->
<script src="../assets/pages/scripts/components-select2.min.js" type="text/javascript"></script>

<script src="../assets/pages/scripts/components-multi-select.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/layui/layui.all.js"></script>

<script>
   /* (function () {

        //点击取消和完成
        $('.close_layui_page').click(function(){
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            parent.layer.close(index); //再执行关闭
        });

        //第一个步骤页面
        $('.data_help_btn').click(function(){
            $('.data_comments').toggleClass('display_none');
        });
        $('.insertVar').click(function(){
            $('.systemVar').toggleClass('display_none');
        });


        //第二个步骤的页面
        layui.use('table', function(){
            var table = layui.table;

            //方法级渲染
            table.render({
                elem: '#LAY_table_user'
                ,url: 'layui_table.json'
                ,cols: [[
                    {field: 'so', title: '选择',templet:"#radioTpl",unresize:true}
                    ,{field:'id', title: '数据对象', sort: true}
                    ,{field:'sex', title: '记录条数', sort: true}
                ]]
                ,cellMinWidth: 80
                ,id: 'testReload'
                ,page: true
                ,height: '300'
                ,done :function(){
                    console.log('hahha')
                }
            });



            table.on('tool(user)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的DOM对象

                if(layEvent === 'detail'){ //查看
                    //do somehing
                } else if(layEvent === 'del'){ //删除
                    layer.confirm('真的删除行么', function(index){
                        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                        layer.close(index);
                        //向服务端发送删除指令
                    });
                } else if(layEvent === 'edit'){ //编辑
                    //do something

                    //同步更新缓存对应的值
                    obj.update({
                        username: '123'
                        ,title: 'xxx'
                    });
                }
            });

            var $ = layui.$, active = {
                reload: function(){
                    var demoReload = $('#demoReload');

                    //执行重载
                    table.reload('testReload', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        ,where: {
                            key: {
                                id: demoReload.val()
                            }
                        }
                    });
                }
            };

            $('.demoTable .layui-btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

        });

        layui.use('table', function(){
            var table = layui.table;

            //方法级渲染
            table.render({
                elem: '#LAY_table_user2'
                ,url: 'layui_table.json'
                ,cols: [[
                    {field: 'so', title: '选择',templet:"#radioTpl",unresize:true}
                    ,{field:'id', title: '数据对象', sort: true}
                    ,{field:'sex', title: '记录条数', sort: true}
                ]]
                ,cellMinWidth: 80
                ,id: 'testReload'
                ,page: true
                ,height: 'full-500'
                ,done :function(){
                    console.log('hahha')
                }
            });



            table.on('tool(user)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的DOM对象

                if(layEvent === 'detail'){ //查看
                    //do somehing
                } else if(layEvent === 'del'){ //删除
                    layer.confirm('真的删除行么', function(index){
                        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                        layer.close(index);
                        //向服务端发送删除指令
                    });
                } else if(layEvent === 'edit'){ //编辑
                    //do something

                    //同步更新缓存对应的值
                    obj.update({
                        username: '123'
                        ,title: 'xxx'
                    });
                }
            });

            var $ = layui.$, active = {
                reload: function(){
                    var demoReload = $('#demoReload');

                    //执行重载
                    table.reload('testReload', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        ,where: {
                            key: {
                                id: demoReload.val()
                            }
                        }
                    });
                }
            };

            $('.demoTable .layui-btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

        });

        //第三个步骤的页面
        layui.use('table', function(){
            var table = layui.table;

            //方法级渲染
            table.render({
                elem: '#LAY_table_user3'
                ,url: 'layui_table.json'
                ,cols: [[
                    {field: 'so', title: '选择',templet:"#radioTpl",unresize:true}
                    ,{field:'id', title: '数据对象', sort: true}
                    ,{field:'sex', title: '记录条数', sort: true}
                ]]
                ,cellMinWidth: 80
                ,id: 'testReload'
                ,page: true
                ,height: 'full-70'
                ,done :function(){
                    console.log('hahha')
                }
            });



            table.on('tool(user)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的DOM对象

                if(layEvent === 'detail'){ //查看
                    //do somehing
                } else if(layEvent === 'del'){ //删除
                    layer.confirm('真的删除行么', function(index){
                        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                        layer.close(index);
                        //向服务端发送删除指令
                    });
                } else if(layEvent === 'edit'){ //编辑
                    //do something

                    //同步更新缓存对应的值
                    obj.update({
                        username: '123'
                        ,title: 'xxx'
                    });
                }
            });

            var $ = layui.$, active = {
                reload: function(){
                    var demoReload = $('#demoReload');

                    //执行重载
                    table.reload('testReload', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        ,where: {
                            key: {
                                id: demoReload.val()
                            }
                        }
                    });
                }
            };

            $('.demoTable .layui-btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

        });

        //第四个步骤的页面
        layui.use('table', function(){
            var table = layui.table;

            //方法级渲染
            table.render({
                elem: '#LAY_table_user4'
                ,url: 'layui_table.json'
                ,cols: [[
                    {field: 'so', title: '选择',templet:"#radioTpl",unresize:true}
                    ,{field:'id', title: '数据对象', sort: true}
                    ,{field:'sex', title: '记录条数', sort: true}
                ]]
                ,cellMinWidth: 80
                ,id: 'testReload'
                ,page: true
                ,height: '300'
                ,done :function(){
                    console.log('hahha')
                }
            });



            table.on('tool(user)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的DOM对象

                if(layEvent === 'detail'){ //查看
                    //do somehing
                } else if(layEvent === 'del'){ //删除
                    layer.confirm('真的删除行么', function(index){
                        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                        layer.close(index);
                        //向服务端发送删除指令
                    });
                } else if(layEvent === 'edit'){ //编辑
                    //do something

                    //同步更新缓存对应的值
                    obj.update({
                        username: '123'
                        ,title: 'xxx'
                    });
                }
            });

            var $ = layui.$, active = {
                reload: function(){
                    var demoReload = $('#demoReload');

                    //执行重载
                    table.reload('testReload', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        ,where: {
                            key: {
                                id: demoReload.val()
                            }
                        }
                    });
                }
            };

            $('.demoTable .layui-btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

        });

        layui.use('table', function(){
            var table = layui.table;

            //方法级渲染
            table.render({
                elem: '#LAY_table_user5'
                ,url: 'layui_table.json'
                ,cols: [[
                    {field: 'so', title: '选择',templet:"#radioTpl",unresize:true}
                    ,{field:'id', title: '数据对象', sort: true}
                    ,{field:'sex', title: '记录条数', sort: true}
                ]]
                ,cellMinWidth: 80
                ,id: 'testReload'
                ,page: true
                ,height: 'full-500'
                ,done :function(){
                    console.log('hahha')
                }
            });



            table.on('tool(user)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的DOM对象

                if(layEvent === 'detail'){ //查看
                    //do somehing
                } else if(layEvent === 'del'){ //删除
                    layer.confirm('真的删除行么', function(index){
                        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                        layer.close(index);
                        //向服务端发送删除指令
                    });
                } else if(layEvent === 'edit'){ //编辑
                    //do something

                    //同步更新缓存对应的值
                    obj.update({
                        username: '123'
                        ,title: 'xxx'
                    });
                }
            });

            var $ = layui.$, active = {
                reload: function(){
                    var demoReload = $('#demoReload');

                    //执行重载
                    table.reload('testReload', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        ,where: {
                            key: {
                                id: demoReload.val()
                            }
                        }
                    });
                }
            };

            $('.demoTable .layui-btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

        });

        //点击下一步
        $('.process_foot').on('click','button',function () {
            var index = parseInt($(this).attr('data-page'));
            var nextIndex = index + 1 ;
            $('.process'+ index).addClass('display_none');
            $('.process'+ nextIndex).removeClass('display_none');
        })


    })();*/

   (function () {
       var sqlPackaging = function () {
           var processButtonInit = function () {

               $('.process_foot').on('click','button',function () {

                   if($(this).hasClass('processNext')){  //点击下一步
                       var index = parseInt($(this).attr('data-page'));
                       var nextIndex = index + 1 ;
                       $('.process'+ index).addClass('display_none');
                       $('.process'+ nextIndex).removeClass('display_none');
                   } else if($(this).hasClass('close_layui_page')){  //点击取消或完成
                       var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                       parent.layer.close(index); //再执行关闭
                   }

               })
           };
           var process1Init = function () {
               //第一个步骤页面
               $('.data_help_btn').click(function(){
                   $('.data_comments').toggleClass('display_none');
               });
               $('.insertVar').click(function(){
                   $('.systemVar').toggleClass('display_none');
               });


               $("#tree_3").jstree({
                   core: {
                       themes: {
                           responsive: !1,
                           "icons" : false,
                           "dots" : false
                       },
                       check_callback: !0,
                       data: [
                           {
                               text: "数值字段",
                               children: [{
                                   text: "ID",
                               }, {
                                   text: "TYPE",
                               }]
                           },
                           {text:"文本字段",
                               children: [{
                                   text: "TNAME",
                               }, {
                                   text: "SINFO",
                               }, {
                                   text: "MSG",
                               }, {
                                   text: "TRACE",
                               }]
                           },
                           {text:"时间字段",
                               children: [{
                                   text: "LOGTIME",
                               }]
                           },{
                               text:'系统变量',
                               children:[{
                                   text:'KPOP'
                               }]
                           }]
                   },
                   types: {
                       "default": {
                           icon: null
                       },
                       file: {
                           //		icon: "fa fa-file icon-state-warning icon-lg"
                       }
                   },
                   state: {
                       key: "demo2"
                   },
                   plugins: ['wholerow','types',"search","contextmenu"],
                   //-------------------------------------------------------------------------
                   "contextmenu": {
                       "items": {
                           "create": null,
                           "rename": null,
                           "remove": null,
                           "ccp": null,
                           "刷新": {
                               "label": "刷新",
                               "action": function(data) {
                                   var inst = jQuery.jstree.reference(data.reference),
                                       obj = inst.get_node(data.reference);
                                   console.info(obj);
                               },
                               "icon" : "fa fa-refresh"
                           },
                       }
                   }
                   //-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- //

               }).bind("select_node.jstree", function(event, data) {
                   var inst = data.instance;
                   var obj= data.node.original;
                   var selectedNode = inst.get_node(data.selected);
                   var id = obj.id;
                   // console.log(obj);
                   //  console.info(selectedNode.aria-level);
                   var level = $("#"+selectedNode.id).attr("aria-level");
                   if(level == 2){

                       $('.insertSql').focus();
                       addEmoticon('insertSql',obj.text);
                   }
                   console.log(obj);
               });

               function addEmoticon(tId,tag) {
                   var txtarea = document.getElementById(tId);
                   //IE
                   if(document.selection) {
                       var theSelection = document.selection.createRange().text;
                       if(!theSelection) { theSelection=tag}
                       txtarea.focus();
                       if(theSelection.charAt(theSelection.length - 1) == " "){
                           theSelection = theSelection.substring(0, theSelection.length - 1);
                           document.selection.createRange().text = theSelection+ " ";
                       } else {
                           document.selection.createRange().text = theSelection;
                       }

                   }
                   // Mozilla
                   else if(txtarea.selectionStart || txtarea.selectionStart == '0'){
                       var startPos = txtarea.selectionStart;
                       var endPos = txtarea.selectionEnd;
                       var myText = (txtarea.value).substring(startPos, endPos);
                       if(!myText) { myText=tag;}
                       if(myText.charAt(myText.length - 1) == " "){ // exclude ending space char, if any
                           subst = myText.substring(0, (myText.length - 1))+ " ";
                       } else {
                           subst = myText;
                       }
                       txtarea.value = txtarea.value.substring(0, startPos) + subst + txtarea.value.substring(endPos, txtarea.value.length);
                       txtarea.focus();
                       var cPos=startPos+(myText.length);
                       txtarea.selectionStart=cPos;
                       txtarea.selectionEnd=cPos;

                   }
                   // All others
                   else{
                       txtarea.value+=tag;
                       txtarea.focus();
                   }
                   if (txtarea.createTextRange) txtarea.caretPos = document.selection.createRange().duplicate();
               }

           };
           var process2Init = function () {
               //第二个步骤的页面
               layui.use('table', function(){
                   var table = layui.table;

                   //方法级渲染
                   table.render({
                       elem: '#LAY_table_user'
                       ,url: 'layui_table.json'
                       ,cols: [[
                           {field: 'so', title: '选择',templet:"#radioTpl",unresize:true}
                           ,{field:'id', title: '数据对象', sort: true}
                           ,{field:'sex', title: '记录条数', sort: true}
                       ]]
                       ,cellMinWidth: 80
                       ,id: 'testReload'
                       ,page: true
                       ,height: '300'
                       ,done :function(){
                           console.log('hahha')
                       }
                   });



                   table.on('tool(user)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                       var data = obj.data; //获得当前行数据
                       var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                       var tr = obj.tr; //获得当前行 tr 的DOM对象

                       if(layEvent === 'detail'){ //查看
                           //do somehing
                       } else if(layEvent === 'del'){ //删除
                           layer.confirm('真的删除行么', function(index){
                               obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                               layer.close(index);
                               //向服务端发送删除指令
                           });
                       } else if(layEvent === 'edit'){ //编辑
                           //do something

                           //同步更新缓存对应的值
                           obj.update({
                               username: '123'
                               ,title: 'xxx'
                           });
                       }
                   });

                   var $ = layui.$, active = {
                       reload: function(){
                           var demoReload = $('#demoReload');

                           //执行重载
                           table.reload('testReload', {
                               page: {
                                   curr: 1 //重新从第 1 页开始
                               }
                               ,where: {
                                   key: {
                                       id: demoReload.val()
                                   }
                               }
                           });
                       }
                   };

                   $('.demoTable .layui-btn').on('click', function(){
                       var type = $(this).data('type');
                       active[type] ? active[type].call(this) : '';
                   });

               });
               layui.use('table', function(){
                   var table = layui.table;

                   //方法级渲染
                   table.render({
                       elem: '#LAY_table_user2'
                       ,url: 'layui_table.json'
                       ,cols: [[
                           {field: 'so', title: '选择',templet:"#radioTpl",unresize:true}
                           ,{field:'id', title: '数据对象', sort: true}
                           ,{field:'sex', title: '记录条数', sort: true}
                       ]]
                       ,cellMinWidth: 80
                       ,id: 'testReload'
                       ,page: true
                       ,height: '300'
                       ,done :function(){
                           console.log('hahha')
                       }
                   });



                   table.on('tool(user)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                       var data = obj.data; //获得当前行数据
                       var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                       var tr = obj.tr; //获得当前行 tr 的DOM对象

                       if(layEvent === 'detail'){ //查看
                           //do somehing
                       } else if(layEvent === 'del'){ //删除
                           layer.confirm('真的删除行么', function(index){
                               obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                               layer.close(index);
                               //向服务端发送删除指令
                           });
                       } else if(layEvent === 'edit'){ //编辑
                           //do something

                           //同步更新缓存对应的值
                           obj.update({
                               username: '123'
                               ,title: 'xxx'
                           });
                       }
                   });

                   var $ = layui.$, active = {
                       reload: function(){
                           var demoReload = $('#demoReload');

                           //执行重载
                           table.reload('testReload', {
                               page: {
                                   curr: 1 //重新从第 1 页开始
                               }
                               ,where: {
                                   key: {
                                       id: demoReload.val()
                                   }
                               }
                           });
                       }
                   };

                   $('.demoTable .layui-btn').on('click', function(){
                       var type = $(this).data('type');
                       active[type] ? active[type].call(this) : '';
                   });

               });
           };
           var  process3Init = function () {
               //第三个步骤的页面
               layui.use('table', function(){
                   var table = layui.table;

                   //方法级渲染
                   table.render({
                       elem: '#LAY_table_user3'
                       ,url: 'layui_table.json'
                       ,cols: [[
                           {field: 'so', title: '选择',templet:"#radioTpl",unresize:true}
                           ,{field:'id', title: '数据对象', sort: true}
                           ,{field:'sex', title: '记录条数', sort: true}
                       ]]
                       ,cellMinWidth: 80
                       ,id: 'testReload'
                       ,page: true
                       ,height: 'full-70'
                       ,done :function(){
                           console.log('hahha')
                       }
                   });



                   table.on('tool(user)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                       var data = obj.data; //获得当前行数据
                       var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                       var tr = obj.tr; //获得当前行 tr 的DOM对象

                       if(layEvent === 'detail'){ //查看
                           //do somehing
                       } else if(layEvent === 'del'){ //删除
                           layer.confirm('真的删除行么', function(index){
                               obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                               layer.close(index);
                               //向服务端发送删除指令
                           });
                       } else if(layEvent === 'edit'){ //编辑
                           //do something

                           //同步更新缓存对应的值
                           obj.update({
                               username: '123'
                               ,title: 'xxx'
                           });
                       }
                   });

                   var $ = layui.$, active = {
                       reload: function(){
                           var demoReload = $('#demoReload');

                           //执行重载
                           table.reload('testReload', {
                               page: {
                                   curr: 1 //重新从第 1 页开始
                               }
                               ,where: {
                                   key: {
                                       id: demoReload.val()
                                   }
                               }
                           });
                       }
                   };

                   $('.demoTable .layui-btn').on('click', function(){
                       var type = $(this).data('type');
                       active[type] ? active[type].call(this) : '';
                   });

               });
           };
           var process4Init = function () {
               //第四个步骤的页面
               layui.use('table', function(){
                   var table = layui.table;

                   //方法级渲染
                   table.render({
                       elem: '#LAY_table_user4'
                       ,url: 'layui_table.json'
                       ,cols: [[
                           {field: 'so', title: '选择',templet:"#radioTpl",unresize:true}
                           ,{field:'id', title: '数据对象', sort: true}
                           ,{field:'sex', title: '记录条数', sort: true}
                       ]]
                       ,cellMinWidth: 80
                       ,id: 'testReload'
                       ,page: true
                       ,height: '300'
                       ,done :function(){
                           console.log('hahha')
                       }
                   });



                   table.on('tool(user)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                       var data = obj.data; //获得当前行数据
                       var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                       var tr = obj.tr; //获得当前行 tr 的DOM对象

                       if(layEvent === 'detail'){ //查看
                           //do somehing
                       } else if(layEvent === 'del'){ //删除
                           layer.confirm('真的删除行么', function(index){
                               obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                               layer.close(index);
                               //向服务端发送删除指令
                           });
                       } else if(layEvent === 'edit'){ //编辑
                           //do something

                           //同步更新缓存对应的值
                           obj.update({
                               username: '123'
                               ,title: 'xxx'
                           });
                       }
                   });

                   var $ = layui.$, active = {
                       reload: function(){
                           var demoReload = $('#demoReload');

                           //执行重载
                           table.reload('testReload', {
                               page: {
                                   curr: 1 //重新从第 1 页开始
                               }
                               ,where: {
                                   key: {
                                       id: demoReload.val()
                                   }
                               }
                           });
                       }
                   };

                   $('.demoTable .layui-btn').on('click', function(){
                       var type = $(this).data('type');
                       active[type] ? active[type].call(this) : '';
                   });

               });

               layui.use('table', function(){
                   var table = layui.table;

                   //方法级渲染
                   table.render({
                       elem: '#LAY_table_user5'
                       ,url: 'layui_table.json'
                       ,cols: [[
                           {field: 'so', title: '选择',templet:"#radioTpl",unresize:true}
                           ,{field:'id', title: '数据对象', sort: true}
                           ,{field:'sex', title: '记录条数', sort: true}
                       ]]
                       ,cellMinWidth: 80
                       ,id: 'testReload'
                       ,page: true
                       ,height: '300'
                       ,done :function(){
                           console.log('hahha')
                       }
                   });



                   table.on('tool(user)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                       var data = obj.data; //获得当前行数据
                       var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                       var tr = obj.tr; //获得当前行 tr 的DOM对象

                       if(layEvent === 'detail'){ //查看
                           //do somehing
                       } else if(layEvent === 'del'){ //删除
                           layer.confirm('真的删除行么', function(index){
                               obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                               layer.close(index);
                               //向服务端发送删除指令
                           });
                       } else if(layEvent === 'edit'){ //编辑
                           //do something

                           //同步更新缓存对应的值
                           obj.update({
                               username: '123'
                               ,title: 'xxx'
                           });
                       }
                   });

                   var $ = layui.$, active = {
                       reload: function(){
                           var demoReload = $('#demoReload');

                           //执行重载
                           table.reload('testReload', {
                               page: {
                                   curr: 1 //重新从第 1 页开始
                               }
                               ,where: {
                                   key: {
                                       id: demoReload.val()
                                   }
                               }
                           });
                       }
                   };

                   $('.demoTable .layui-btn').on('click', function(){
                       var type = $(this).data('type');
                       active[type] ? active[type].call(this) : '';
                   });

               });
           };
           return {
               init : function () {
                   processButtonInit(); //步骤按钮初始化
                   process1Init();      //第一页步骤初始化
                   process2Init();     //第二页步骤初始化
                   process3Init();      //第三页步骤初始化
                   process4Init();      //第四页步骤初始化
               }
           }
       }();

       sqlPackaging.init();
   })();

</script>
</html>